<template>
	<div class="modal">
		<!-- fadeInDown  flipInX fadeInUp-->
			<div class="logo fadeInUp" v-if="status==1 && !show">
				<img src="../../../static/answer/question_finish.png"/>
				<img v-if="prizeStatus" class="start" @click.stop="startPrize" src="../../../static/answer/start_guess.png"/>
				<img class="resetgame" @click.stop="reset" src="../../../static/answer/question_reset.png"/>
			</div>
			<div class="logo fadeInDown" v-if="status==2 && !show">
				<img src="../../../static/answer/question_fail.png"/>
				<img class="resetgame"  @click="reset" src="../../../static/answer/question_reset.png"/>
			</div>
			<div class="prize_box fadeInDown " v-if="show && prize==0">
				<div class="prize">
					<div class="prizeInfo agin">
						<div><img src="../../doc/example.jpeg" alt=""></div>
						<span>很遗憾，您未中奖</span>
					</div>
					<div class="btn-again" @click="reset" >
						再玩一次
					</div>
				</div>
			</div>
			<div class="prize_box wobble" v-if="show && prize==1">
				<div class="top-image">
					<img src="../../../static/answer/prize_top_image.png" />
				</div>
				<div class="prize">
					<div class="prizeInfo">
						<div><img :src="formatImage(prizeInfo)" alt=""></div>
						<span>{{prizeInfo.title}}</span>
					</div>
					<div class="btn">
						<img src="../../../static/answer/prize_show.png" @click="goPrizeInfo"/>
						<img src="../../../static/answer/prize_reset.png"  @click="reset" />
					</div>
					<div class="msg">所中奖品可在“中奖记录”内查看</div>
				</div>
			</div>
			
			
			
			<div class="modal—share" v-if="modalShare" @touchmove.stop.prevent="moveHandle" @click="closeModal">
				<div class="modal_inner" @click.stop="hideModals($event)">
				  <div class="pla"></div>
				  <img class="img" v-if="canvasImg!=''" :src="canvasImg" />
				
				  <div class="no_image" v-else></div>
				  <div class="text">长按保存图片</div>
				  <vue-canvas-poster v-if="startCanvas" :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
				</div>
			</div>
	</div>
</template>

<script>
	import{getAnswerPrize,getAnswerRank} from '@/api/api'
	import { mapGetters } from 'vuex'
	import {checkImage} from '@/until/QFH5.js'
	export default{
		props:{
			// 1抽奖  2 挑战失败 3抽奖无  3中奖了 
			status:{
				require:true,
				default:1
			},
			prizeStatus:{
				require:true,
				default:false
			},
			record_id:{
				require:true,
				default:''
			},
		},
		computed:{
			...mapGetters(['activityType'])
		},
		data(){
			return{
				show:false,
				prize:0,
				actid:'',
				answerId:'',
				prizeBtn:false,
				prizeInfo:{ },
				
				painting:{},
				modalShare:false,
				startCanvas:false,
				canvasImg:''
			}
		},
		methods:{
			formatImage(data){
				return checkImage(data.type,data.image)
			},
			moveHandle(){
			
			},
			hideModals(event){
			  event.stopPropagation()
			},
			closeModal(){
				this.modalShare = false
			},
			//调用拼图
			success(src) {
				uni.hideLoading()
				this.canvasImg = src
				this.$nextTick(()=>{
					this.startCanvas =false
				})
			},
			fail(err) {
				this.$nextTick(()=>{
					this.startCanvas =false
				})
				  console.log('fail', err)
			},
			//设置参数
			setPainting(pix){
				let qrurl = location.origin+"/plugin-view/?&plugin=answer&type=answer&id="+this.actid
				let prizeStr = '我在“答题挑战”活动中获得'+this.prizeInfo.title+',快来跟我一起参与吧！'
				// qrurl = encodeURIComponent(qrurl)
				console.log('+++++',qrurl)
				this.painting={
					width: '640px',
					height: '1000px',
					background:require('../../../static/answer/share_poster.png'),
					views: [
						// {
						//   type: 'rect',
						//   css: {
						//     top:'108px',
						//     left: '40px',
						//     width: '560px',
						// 	height:'750px',
						//     color: "#ffffff",
						// 	borderRadius:'30px'
						//   }
					 //  },
					 {
						 type:'image',
						 url:require('../../../static/answer/share_poster_bg.png'),
						 css:{
							 top:'108px',
							 left: '40px',
							 width: '560px',
							 height:'750px',
							 shadow: '0px 3px 10px rgba(81,2,24,0.3)'
						 }
					 },
					  {
					    type: 'text',
					    text: prizeStr,
					    css: {
					      left: '70px',
					      top: '533px',
					      width: '500px',
					      color: "#222",
					      fontSize: '30px',
					      lineHeight: '48px',
					      textAlign: 'left',
					      maxLines: 2,
					    }
					  },
					  {
					    type: 'text',
					    text: '&',
					    css: {
					      left: '70px',
					      top: '640px',
					      width: '500px',
					      color: "#C5C5C5",
					      fontSize: '0px',
					      textAlign: 'center',
					      maxLines: 1,
						  borderWidth: '0.5px',
						  borderColor: '#C5C5C5',
						  borderStyle:'dashed'
					    }
					  },
					  {
					    type: 'text',
					    text: '扫一扫即可参与活动,一起赢好礼！',
					    css: {
					      left: '230px',
					      top: '696px',
					      width: '320px',
					      color: "#222",
					      fontSize: '30px',
					      lineHeight: '48px',
					      textAlign: 'left',
					      maxLines: 2,
					    }
					  },
					  {
					    type: 'qrcode',
					    content: qrurl,
					    css: {
					      left: '70px',
					      top: '663px',
					      width: '150px',
					      height: '150px',
						  color: '#000',
						  
					    }
					  },
					  {
					    type: 'image',
					    url: this.formatImage(this.prizeInfo),
					    css: {
					  		top:'138px',
					        left: '70px',
					  		width:'500px',
					  		height: '375px',
					  		mode: 'scaleToFill',
							borderRadius:'20px'
					    }
					  },
					]
				}
				this.startCanvas = true
			},
			startPrize(){
				this.showPrize = true
				let obj = {
					actid:this.actid,
					plugin:'answer',
					record_id:this.record_id
				}
				getAnswerPrize(obj).then(res=>{
					this.show = true
					if(res.data.ret==0){
						this.prize=0
					}else{
						this.prize=1
						this.prizeInfo = res.data.prize
					}
				})
			},
			goPrizeInfo(){
				// let url = '/plugin/pages/guess/prizeInfo?id='+this.actid+'&pid='+this.prizeInfo.id
				// this.$navigateTo({ url: url})
				this.setPainting()
				this.modalShare = true
				
			},
			reset(){
				this.close()
			},
			close(){
				this.$emit('close')
			}
		},
		mounted(){
			this.actid = this.$route.query.id
			this.prizeBtn = this.prizeStatus
		},
	}
</script>

<style lang="scss">
	@import url("../animation.css");
	.modal{
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.8);
		width: 100%;
		height: 100%;
		.content{
			margin: 260rpx auto 0;
		}
		.logo{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 260rpx;
			justify-content: flex-start;
			img:first-child{
				width: 500rpx;
				height: 440rpx;
			}
			.start{
				width: 330rpx;
				height: 119rpx;
				margin-top: 6rpx;
			}
			.resetgame{
				width: 320rpx;
				height: 90rpx;
				margin-top: 20rpx;
			}
		}
		.prize_box{
			padding-top: 260rpx;
			.top-image{
				width: 640rpx;
				height: 214rpx;
				margin: 0 auto ;
				line-height: 0;
				img{
					width: 640rpx;
					height: 214rpx;
				}
			}
		}
		.prize{
			width: 639rpx;
			// height: 590rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin: 0 auto 0;
			padding: 1rpx 0 67rpx ;
			position: relative;
			.prizeInfo{
				margin-top: 50rpx;
				text-align: center;
				div{
					
					img{
						width: 200rpx;
						height: 200rpx;
					}
				}
				span{
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					display: block;
					margin-top: 10rpx;
				}
			}
			.btn{
				display: flex;
				justify-content: center;
				margin-top: 58rpx;
				img{
					margin: 0 10rpx;
				}
				img:first-child{
					width: 290rpx;
					height: 115rpx;
					margin-top: -22rpx;
				}
				img:nth-child(2){
					width: 280rpx;
					height: 90rpx;
				}
			}
			.msg{
				margin-top: 36rpx;
				text-align: center;
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #707070;
			}
			.agin{
				margin-top: 80rpx;
			}
				
			.btn-again{
				width: 480rpx;
				height: 90rpx;
				background: linear-gradient(96deg, #E9338D 0%, #E7333E 100%);
				border-radius: 78rpx;
				line-height: 90rpx;
				text-align: center;
				color: #FFFFFF;
				margin: 40rpx auto 0;
			}
			
		}
	}
	.modal—share{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, .7);
		text-align: center;
		line-height: 0;
	  .modal_inner{
	    position: relative;
	    z-index: 10;
	    width:500rpx;
	    height: auto;
	    margin: 10vh auto 0;
	    overflow: hidden;
	    .pla{
	      height: 1rpx;
	    }
	    .img{
	      // margin-top: 0rpx;
		  margin-top: 10vh;
	      width:500rpx;
	      height: auto;
	    }
	    .no_image{
	      width:500rpx;
	      height: 964rpx;
	      background: rgba(255,255,255,0.3);
	    }
	    .text{
	      padding-top: 30rpx;
	      width: 100%;
	      text-align: center;
	      font-size: 30rpx;
	      font-family: PingFang SC-Regular, PingFang SC;
	      font-weight: 400;
	      color: #FFFFFF;
	      line-height: 40px;
	    }
	  }
	
	}
</style>